<template>
  <div class="index">
    <div class="container">
      <div class="heard_div">
        <div class="searchPage_div">
          <search-input 
          @input="handleValueChange"
          type="tel"
          maxlength= "11"
          placeholder="请输入用户手机号码"
          name="searchValue"
          ></search-input>
        </div>
        <div class="right_button">
          <div class="create_button mr20" @click="statisticsButton()">查看统计</div>
          <div class="create_button" @click="createButton()" >
            创建用户
          </div>
        </div>
        
      </div>
      <div class="noTime_div" v-if="!userData.data">没有搜索到结果..</div>
      <table border="1" cellspacing="0" cellpadding="0" v-if="userData.data">
      <thead >
        <tr class="active">
          <th class="table-3">ID</th>
          <th class="table-8">真实姓名</th>
          <th class="table-12">手机号</th>
          <th class="table-12">微信号</th>
          <th class="table-15">身份证号</th>
          <th class="table-8">会员类型</th>
          <th class="table-8">会员状态</th>
          <th class="table-8">返佣金额</th>
          <!-- <th class="table-8">返佣金额</th>
          <th class="table-8">返佣状态</th> -->
          <th class="table-15">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in userData.data.user_list" :key="item.id" :class="index%2 == 0 ? 'color1' : 'color2' ">
          <td class="middle">{{item.id || '暂无'}}</td>
          <td class="middle">{{item.name || '暂无'}}</td>
          <td class="middle">{{item.mobile || '暂无'}}</td>
          <td class="middle">{{item.wechat_id || '暂无'}}</td>
          <td class="middle">{{item.identity_card || '暂无'}}</td>
          <td class="middle">{{item.card_type == 1 && "月卡" || "次卡" || '暂无'}}</td>
          <td class="middle">{{item.month_card_state == 1 && "已开通" || item.month_card_state == 2 && "未开通" || item.month_card_state == 3 && "已过期"  || !item.memberStatus && '暂无'}}</td>
          <td class="middle">{{item.rearl_time_money || '0.00'}}¥</td>
          <!-- <td class="middle">{{item.status}}</td> -->
          <td class="middle td_flex"><div class="btn-info" @click="editInfo(item.id)">编辑</div><div class="btn-info" @click="addRecommend(item.id, item.mobile)">邀请用户</div><div class="btn-info" @click="settlement(item.id)">结算</div></td>
        </tr>
      </tbody>
    </table>
    <div class="paging_div">
      <mo-paging v-if="userData.data"
            :page-index="Number(userData.data.page)" 
            :total="Number(userData.data.page_num)" 
            :page-size="userData.data.page_size" 
            @change="pageChange">
            </mo-paging>
    </div>
    <div class="add_toast" v-if="openToast">
        <div class="close_div" @click="closeToast()"><img src="../../assets/close-icon.png" alt=""></div>
       <div class="page_title">{{toastTitle}}</div>
          <div class="cell">
              <div class="title">用户姓名: </div>
              <div class="input_div"><input name="name" @input="inputValueChange($event)" type="text"></div>
          </div>
          
          <div class="cell">
              <div class="title">微信号: </div>
              <div class="input_div"><input name="wechat_id" @input="inputValueChange($event)" type="text"></div>
          </div>
          <div class="cell">
              <div class="title">联系方式: </div>
              <div class="input_div"><input name="mobile" @input="inputValueChange($event)" maxLength="11" type="tel"></div>
          </div>
          <div class="cell">
              <div class="title">身份证号: </div>
              <div class="input_div"><input name="identity_card" @input="inputValueChange($event)" type="text"></div>
          </div>
          <div class="cell">
              <div class="title">推荐人手机号: </div>
              <div class="input_div"><input name="inviter_mobile" :readonly="toastTitle == '邀请用户'" :value="postParams.inviter_mobile" @input="inputValueChange($event)" type="number"></div>
          </div>
          <div class="cell">
              <div class="title">月卡用户: </div>
              <div class="input_div div_flex">
                <div><input name="card_type" type="radio" value="1" @change="inputValueChange($event)" />是</div> 
                <div><input name="card_type" type="radio" value="2" checked @change="inputValueChange($event)" />否</div>
              </div>
          </div>
          <div class="cell" v-if="postParams.card_type == 1">
              <div class="title">月卡购买日期: </div>
              <div class="input_div special_input"><vue-datepicker-local @input="submit" name="card_start_date" style="width: 100%;" clearable v-model="time" format="YYYY-MM-DD"></vue-datepicker-local></div>
          </div>
          <div class="cell">
              <div class="title">是否开通: </div>
              <div class="input_div div_flex">
                <div><input name="month_card_state" type="radio" value="1" @change="inputValueChange($event)" />已开通</div> 
                <div><input name="month_card_state" type="radio" value="2" checked @change="inputValueChange($event)" />未开通</div>
              </div>
          </div>
          <div class="commit" @click="commit()">
                提交
          </div>
    </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import getUserList from "../../services/searchPage/getUser";
import searchInfo from "../../services/searchPage/searchInfo";
import emptyUserMoney from "../../services/searchPage/emptyUserMoney";
import postUserInfo from "../../services/searchPage/postUserInfo";
import VueDatepickerLocal from "../vue-datepicker-local";
import Format from "../../uitl/format.js";
import MoPaging from "../common/paging";
import SearchInput from "../common/searchInput";
var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
export default {
  name: "HelloWorld",
  components: {
    SearchInput,
    VueDatepickerLocal,
    MoPaging
  },
  data() {
    return {
      openToast: false,
      toastTitle: "",
      time: "",
      userData: {},
      params: {
        action: "getUserList",
        type: 1,
        pageon: 1,
        mobile: ""
      },
      searchParams: {
        action: "searchUserInfo",
        mobile: ""
      },
      MoneyParams: {
        action: "emptyUserMoney",
        id: ""
      },
      postParams: {
        name: "",
        wechat_id: "",
        mobile: "",
        identity_card: "",
        card_start_date: "",
        inviter_mobile: "",
        card_type: "2",
        month_card_state: "2"
      }
    };
  },
  created() {
    // let _params = this.params;
    this.getUserList(this.params);
  },
  methods: {
    // 新建用户
    createButton() {
      // this.$router.push({ name: "AddUser" });
      // console.log("跳转到创建页面");
      this.toastTitle = "添加用户";
      this.openToast = true;
    },

    addRecommend(id, phone) {
      this.toastTitle = "邀请用户";
      this.postParams.inviter_mobile = phone;
      this.openToast = true;
    },

    // 查看信息
    editInfo(id) {
      this.$router.push({ name: "EditInfo", query: { id: id } });
    },

    // 跳转到统计页
    statisticsButton() {
      this.$router.push({ name: "Statistics" });
    },

    // 关闭添加toast
    closeToast() {
      (this.time = ""),
        (this.postParams = {
          name: "",
          wechat_id: "",
          mobile: "",
          identity_card: "",
          card_start_date: "",
          inviter_mobile: "",
          card_type: "2",
          month_card_state: "2"
        });
      this.openToast = false;
    },

    // input发生变化时
    inputValueChange(e) {
      let value = e.target.value;
      let type = e.target.name;
      if (type == "card_type") {
        if (value == 2) {
          this.postParams.card_start_date = "";
          this.time = '';
        }
      }
      this.postParams[type] = value;
      console.log("value", name, value, this.postParams);
    },

    // 日期组件得到的值
    submit: function(value) {
      let newDate = (value && value.Format("yyyy-MM-dd")) || "";
      this.postParams.card_start_date = newDate;
    },

    // 提交表单
    commit() {
      const vm = this;
      let regCard = this.postParams.identity_card;
      console.log('asdasdadasdasdas', reg);
      if (!vm.postParams.name) {
        alert("请填写用户姓名～");
      } else if (!vm.postParams.wechat_id) {
        alert("请填写用户的微信号～");
      } else if (!vm.postParams.mobile) {
        alert("请填写用户的手机号～");
      } else if (!vm.postParams.identity_card) {
        alert("请填写用户的身份证号～");
      } else if (!reg.test(regCard)) {
        alert("请输入有效的身份证号码～");
        return false;
      } else {
        postUserInfo(false, vm.postParams).then(
          res => {
            console.log("postRes", res.data);
            (this.time = ""),
              (vm.postParams = {
                name: "",
                wechat_id: "",
                mobile: "",
                identity_card: "",
                card_start_date: "",
                inviter_mobile: "",
                card_type: "2",
                month_card_state: "2"
              });
            vm.openToast = false;
            let nextParams = {
              action: "getUserList",
              type: 1,
              pageon: 1,
              mobile: ""
            };
            alert("添加成功");
            vm.getUserList(nextParams);
          },
          erro => {
            console.log("erro", erro);
          }
        );
      }
    },

    // 点击跳页
    pageChange(page) {
      console.log("page", page);
      this.params.pageon = page;
      this.getUserList(this.params);
      // this.page = page;
      // this.getList();
    },

    // 搜索查询
    handleValueChange: function(value, key) {
      const vm = this;
      this.params.mobile = value;
      clearInterval(vm.timer); // 输入文字的时候先清理定时器
      vm.timer = setTimeout(() => {
        console.log("value", value, key);
        this.params.pageon = 1;
        vm.getUserList(this.params);
      }, 1000); // 1秒后执行函数
    },

    settlement(id) {
      const vm = this;
      this.MoneyParams.id = id;
      emptyUserMoney(false, this.MoneyParams).then(
        res => {
          // vm.userData = res;
          alert("结算成功～");
          console.log("res", res);
          let nextParams = {
            action: "getUserList",
            type: 1,
            pageon: 1,
            mobile: ""
          };
          vm.getUserList(nextParams);
        },
        erro => {
          console.log("erro", erro);
        }
      );
    },

    //
    searchInfo(params) {
      const vm = this;
      searchInfo(false, params).then(
        res => {
          vm.userData = res;
          console.log("res", res);
        },
        erro => {
          console.log("erro", erro);
        }
      );
    },

    // 获取用户列表
    getUserList(params) {
      const vm = this;
      getUserList(false, params).then(
        res => {
          vm.userData = res;
          console.log("res", res);
        },
        erro => {
          // vm.userData  = 
          vm.userData = erro;
          console.log("erro111111", erro);
        }
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("../../assets/img1.jpg") no-repeat;
  background-size: 100%;
  .container {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    background: #f7f7f7;
    overflow: hidden;
  }
  .heard_div {
    display: flex;
    margin: 20px 30px 20px 20px;
    justify-content: space-between;
    .create_button {
      cursor: pointer;
      height: 30px;
      width: 100px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      background: #5ebfb8;
      border-radius: 15px;
      margin-top: 10px;
    }
  }
  .paging_div {
    text-align: center;
    margin-top: 30px;
  }
  .searchPage_div {
    width: 30%;
  }
  table {
    // border-color:#fff;
    width: 95%;
    border: 1px solid #999;
    color: #333;
    margin-left: 30px;
    table-layout: fixed;
  }
  .table-8 {
    width: 8%;
  }
  .table-12 {
    width: 12%;
  }
  .table-15 {
    width: 15%;
  }
  .table-3 {
    width: 3%;
  }
  .color1 {
    background: #fff;
  }
  .color2 {
    background: #e1e1e1;
  }
  .btn-info {
    color: #0275d8;
    cursor: pointer;
  }
  .btn-left {
    float: left;
    margin-left: 20px;
  }
  th {
    padding: 10px;
  }
  td {
    height: 30px;
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .td_flex {
    display: flex;
    div {
      flex: 1;
    }
  }
  .right_button {
    display: flex;
  }
  .mr20 {
    margin-right: 20px;
  }
  .noTime_div{
    text-align: center;
    font-size: 28px;
    margin-top: 100px;
  }
  .add_toast {
    position: absolute;
    z-index: 100;
    width: 400px;
    left: 50%;
    top: 100px;
    margin-left: -200px;
    box-shadow: 0 0 30px #06a6ee;
    background: #fff;
    border: 1px #e1e1e1 solid;
    padding-bottom: 30px;
    .close_div {
      width: 15px;
      height: 15px;
      line-height: 25px;
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .page_title {
      font-size: 24px;
      margin-left: 30px;
      margin-top: 30px;
      border-bottom: 1px #e1e1e1 solid;
    }
    .cell {
      margin-left: 30px;
      margin-top: 30px;
      display: flex;
      .title {
        width: 120px;
      }
      .special_input {
        padding-right: 25px !important;
      }
      .input_div {
        margin-left: 10px;
        flex: 1;
        padding-right: 40px;
        input {
          padding: 5px 5px;
          padding-left: 10px;
          width: 100%;
        }
      }
      .div_flex {
        display: flex;
        div {
          input {
            width: 25px;
          }
          flex: 1;
          display: flex;
        }
      }
    }
    .commit {
      margin-left: 150px;
      margin-top: 30px;
      width: 100px;
      cursor: pointer;
      text-align: center;
      color: #fff;
      border-radius: 10px;
      background: #5ebfb8;
      padding: 5px 10px;
    }
  }
}
</style>
